<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
  .nav {
    background: #333;
    padding: 10px;
  }

  .nav-item {
    display: inline-block;
    color: white;
    padding: 10px 20px;
    margin-right: 5px;
    background: #666;
  }
  
  .button {
    display: inline-block;
    padding: 8px 15px;
    background: #2196F3;
    color: white;
  }

  .button img {
    vertical-align: middle; /* 垂直对齐图标 */
    margin-right: 5px;
  }
.grid {
    font-size: 0; /* 消除间隙 */
  }

  .grid-item {
    display: inline-block;
    width: 25%; 
    /* 一行四个,自动改变大小 */
    height: 100px;
    background: #eee;
    box-sizing: border-box;
    border: 1px solid #999;
    font-size: 16px; /* 重置字体 */
  }
  </style>
</head>
<body>
    <!-- 块元素 -->
       <div>成块的</div>
       <img src="D:\OneDrive\图片\联想截图\联想截图_20250526151255.png" alt="块">
      <!-- div默认换行也即自己独占一行，span默认不换行-->
    
<br>
    <!-- 内联元素 -->
      <span>内联的</span>
   <img src="D:\OneDrive\图片\联想截图\联想截图_20250526151751.png" alt="内联">    


   


<nav class="nav">
  <a class="nav-item">首页</a>
  <a class="nav-item">产品</a>
  <a class="nav-item">关于我们</a>
</nav>
<button class="button">
  <img src="D:\OneDrive\Desktop\sabasidian-heart.jpg" alt="图标" width="20">
  下载文件
</button>
<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>
</body>
</html>